<template>
  <div class="homePage">
    <div class="event">
      <div v-if="data.currentHandle == 2" class="titel-table">
        <toDeal @changeBoard="changeBoard" @changeProcess="changeProcess" ref="childRef"></toDeal>
      </div>
      <div v-if="data.currentHandle == 3" class="titel-table">
        <deal @changeBoard="changeBoard" @changeProcess="changeProcess"></deal>
      </div>
      <div v-if="data.currentHandle == 4" class="titel-table">
        <toRead @changeBoard="changeBoard" @changeProcess="changeProcess"></toRead>
      </div>
      <div v-if="data.currentHandle == 5" class="titel-table">
        <read @changeBoard="changeBoard" @changeProcess="changeProcess"></read>
      </div>
      <p v-if="data.currentHandle == 1" class="title">事项办理情况</p>
      <div v-if="data.currentHandle == 1" class="event-list">
        <div
          class="event-box bg1"
          @click.prevent="changeStatus(2, data.situationData?.pendingTasks)"
        >
          <img src="./img/db.png" alt="" />
          <div class="info">
            <p>待办事项</p>
            <p class="number">
              <span>{{ data.situationData?.pendingTasks || 0 }}</span> 件
            </p>
          </div>
        </div>
        <div
          class="event-box bg2"
          @click.prevent="changeStatus(3, data.situationData?.completedTasks)"
        >
          <img src="./img/yb.png" alt="" />
          <div class="info">
            <p>已办事项</p>
            <p class="number">
              <span>{{ data.situationData?.completedTasks || 0 }}</span> 件
            </p>
          </div>
        </div>
        <div
          class="event-box bg3"
          @click.prevent="changeStatus(4, data.situationData?.pendingReadTasks)"
        >
          <img src="./img/dy.png" alt="" />
          <div class="info">
            <p>待阅事项</p>
            <p class="number">
              <span>{{ data.situationData?.pendingReadTasks || 0 }}</span> 件
            </p>
          </div>
        </div>
        <div
          class="event-box bg4"
          @click.prevent="changeStatus(5, data.situationData?.completedReadTasks)"
        >
          <img src="./img/yy.png" alt="" />
          <div class="info">
            <p>已阅事项</p>
            <p class="number">
              <span>{{ data.situationData?.completedReadTasks || 0 }}</span> 件
            </p>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="data.processVisible"
        width="60%"
        class="global-dialog"
        top="10vh"
        @close="closeProcessVisable"
      >
        <achievement v-if="data.tabId == '1'" :params="data.params" out="1"></achievement>
        <talent v-if="data.tabId == '2'" :params="data.params" out="1"></talent>
        <group v-if="data.tabId == '3'" :params="data.params" out="1"></group>
        <expertsManager v-if="data.tabId == '4'" :params="data.params" out="1"></expertsManager>
        <talentsManager v-if="data.tabId == '5'" :params="data.params" out="1"></talentsManager>
        <budget v-if="data.tabId == '17'" :params="data.params" out="1"></budget>
        <project v-if="data.tabId == '18'" :params="data.params" :out="1"></project>
        <contract v-if="data.tabId == '19'" :params="data.params" :out="1"></contract>
        <plan v-if="data.tabId == '9'" :params="data.params" :out="1"></plan>
        <process v-if="data.tabId == '8'" :params="data.params" :out="1"></process>

        <template #footer>
          <el-row type="flex">
            <el-col :span="18">
              <div class="dialog-footer" v-if="data.currentHandle == 2">
                <el-form
                  label-width="100px"
                  :rules="rulesComment"
                  ref="ruleFormRef"
                  :model="ruleForm"
                >
                  <el-form-item label="审批意见" prop="comment">
                    <el-input
                      :rows="2"
                      type="textarea"
                      placeholder="审批意见"
                      v-model="ruleForm.comment"
                      clearable
                    />
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span class="dialog-footer">
                  <el-button @click="closeProcessVisable">关闭</el-button>
                  <el-button
                    type="danger"
                    @click="refuse"
                    v-if="data.currentHandle == 2 && data.type == '0'"
                    style="margin-top: 20px"
                    >驳回</el-button
                  >
                  <el-button
                    type="primary"
                    @click="pass"
                    v-if="data.currentHandle == 2 && data.type == '0'"
                    style="margin-top: 20px"
                    >通过</el-button
                  >
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </div>
    <div class="notice">
      <div class="notice-tab">
        <div v-for="(item, index) in data.typeList" :key="index">
          <button
            class="tab-header"
            @click="switchTab(item.itemValue)"
            :class="{ active: data.activeName === item.itemValue }"
          >
            {{ item.itemText }}
          </button>
          <span
            v-if="data.activeName == item.itemValue"
            @click="openMore(item.itemText)"
            class="more"
            >更多>></span
          >
        </div>
      </div>
      <ul
        v-for="(item, index) in data.typeList"
        :key="index"
        class="content"
        v-show="data.activeName == item.itemValue"
      >
        <li @click="showDetail(item)" v-for="(item, index) in data.typeContent" :key="index">
          <p>
            {{ item.title }}
          </p>
          <span>{{ item.modifyTime }}</span>
        </li>
      </ul>
      <el-dialog :title="data.detailTitle.title" v-model="data.detailDialog" width="55%" center>
        <div class="infoContent">
          <p>资讯内容：{{ data.detailTitle.content }}</p>
        </div>
        <hr />
        <p>来源：{{ data.detailTitle.source }}</p>
        <p>发布人：{{ data.detailTitle.createBy }}</p>
        <p>发布时间：{{ data.detailTitle.modifyTime }}</p>
      </el-dialog>
    </div>
    <div class="wraning">
      <!-- <p>预警总数 : {{ data.echartsHead }} 件</p> -->
      <div id="chartDom" ref="chartRef"></div>
    </div>
    <div class="wranings notice">
      <div class="notice-tab">
        <button class="tab-header active">预警消息</button>
        <span @click="openMore('预警消息')" class="more" style="margin-top: 0.5vh">更多>></span>
      </div>
      <ul class="content">
        <li @click="showDetail2(item)" v-for="(item, index) in data.earlyWarningList" :key="index">
          <p>
            {{ item.warningTheme }}
          </p>
          <span>{{ item.reminderTime?.slice(0, 10) || '暂无' }}</span>
        </li>
      </ul>
      <el-dialog
        :title="data.detailTitle2.warningTheme"
        v-model="data.detailDialog2"
        width="55%"
        center
      >
        <div class="infoContent">
          <p>资讯内容：{{ data.detailTitle2.earlyWarningContent }}</p>
        </div>
        <hr />
        <p>发布时间：{{ data.detailTitle2.reminderTime?.slice(0, 10) }}</p>
      </el-dialog>
    </div>
    <el-dialog :title="data.infoType" v-model="data.isMore" top="10vh" width="60%">
      <infoMore
        :infoType="data.infoType"
        :infoList="data.infoList"
        @showDetail="showInfoDetail"
      ></infoMore>
      <template #footer>
        <el-button @click="data.isMore = false">关闭</el-button>
      </template>
      <el-pagination
        background
        layout="prev, pager, next ,total,jumper"
        :total="data.infoPage.total"
        v-model:current-page="data.infoPage.current"
        @current-change="handleInfoCurrent"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import flowChart from '@/components/PublicProcess/Chart/flowChart.vue'
import achievement from '@/views/outExamine/achievement/index.vue'
import budget from '@/views/outExamine/budget/construction/digital/index.vue'
import expertsManager from '@/views/outExamine/expertsManager/index.vue'
import group from '@/views/outExamine/group/index.vue'
import talent from '@/views/outExamine/talent/index.vue'
import talentsManager from '@/views/outExamine/talentsManager/index.vue'
import project from '@/views/outExamine/project/index.vue'
import contract from '@/views/outExamine/contract/index.vue'
import plan from '@/views/outExamine/plan/index.vue'
import process from '@/views/outExamine/progress/index.vue'
import { Modals, tips } from '@/views/science/components/tips/tips'
import * as echarts from 'echarts'
import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue'

import {
  allowProcess,
  getNewsList,
  getNewsTypes,
  getTaskSummary,
  getWarningCount,
  getWarningList,
  refuseProcess,
} from './api/homePage'
import infoMore from './components/infoMore.vue'
import deal from './deal.vue'
import read from './read.vue'
import toDeal from './todeal.vue'
import toRead from './toread.vue'

export default defineComponent({
  components: {
    deal,
    read,
    toDeal,
    toRead,
    infoMore,
    flowChart,
    talent,
    achievement,
    group,
    talentsManager,
    expertsManager,
    budget,
    project,
    contract,
    plan,
    process,
  },
  setup() {
    const ruleFormRef = ref()
    const childRef = ref()
    const ruleForm = reactive({
      comment: '',
    })
    const rulesComment = reactive({
      comment: [{ required: true, message: '请输入审核意见', trigger: 'change' }],
    })
    const data = reactive({
      currentHandle: 1,
      processVisible: false,
      tabId: '0',
      type: '0',
      params: {
        procInsId: '',
        businessKey: '',
        businessType: '',
        random: new Date().valueOf(),
      },
      infoPage: {
        current: 1,
        size: 10,
        total: 0,
      },
      infoType: '',
      infoList: [],
      clientHeight: 0,
      myChart: '' as any,
      activeName: '',
      situationData: {} as any,
      chartsData: [] as any,
      earlyWarningList: [] as any,
      echartsHead: 0,
      isMore: false,
      typeList: [] as any,
      typeContent: [] as any,
      detailDialog: false,
      detailTitle: {} as any,
      detailDialog2: false,
      detailTitle2: {} as any,
    })
    getTaskSummary().then((res) => {
      data.situationData = res.data.data
    })
    //获取新闻咨询
    getNewsTypes().then((res) => {
      console.log('咨询类型', res.data.data)
      data.typeList = res.data.data.XTGL_NEWS_TYPE
      data.activeName = data.typeList[0].itemValue
      switchTab(data.typeList[0].itemValue)
    })
    //切换咨询的事件
    const switchTab = (current) => {
      data.activeName = current
      getNewsList({ type: data.activeName, current: data.infoPage.current, status:1 }).then((res) => {
        let result = res.data.data
        console.log('切换咨询的事件', result)
        data.infoPage.current = result.current
        data.infoPage.total = result.total
        data.typeContent = result.records.filter((item) => {
          console.log(item.status, 'item.status')
          return item.status == '1'
        })
        data.infoList = data.typeContent
      })
    }
    //获取预警列表
    const initWarningList = () => {
      getWarningList({ current: data.infoPage.current }).then((res) => {
        if (res.data.code == 200) {
          let result = res.data.data
          console.log('预警列表', result)
          data.earlyWarningList = result.records
          data.infoList = data.earlyWarningList
          data.infoPage.current = result.current
          data.infoPage.total = result.total
        }
      })
    }
    initWarningList()
    const changeStatus = (status, num) => {
      // 如果当前任务为0.不进行跳转
      if (num == 0) {
        return false
      }
      data.currentHandle = status
    }
    const changeBoard = () => {
      data.currentHandle = 1
      getTaskSummary().then((res) => {
        data.situationData = res.data.data
      })
    }
    const changeProcess = (parms: any, type: any) => {
      console.log(parms, 'parms')
      data.type = type
      if (type == 2) {
        data.params.procInsId = parms.processInstanceId
        data.params.businessKey = parms.businessKey
        data.params.businessType = parms.businessType
      } else {
        data.params.procInsId = parms.caseId
        data.params.businessKey = parms.businessId
        data.params.businessType = parms.businessType
      }

      if (parms.businessType == 'YW01') {
        data.tabId = '1'
        data.processVisible = true
      } else if (parms.businessType == 'YW02') {
        data.tabId = '2'
        data.processVisible = true
      } else if (parms.businessType == 'YW03') {
        data.tabId = '3'
        data.processVisible = true
      } else if (parms.businessType == 'YW04') {
        data.tabId = '4'
        data.processVisible = true
      } else if (parms.businessType == 'YW05') {
        data.tabId = '5'
        data.processVisible = true
      } else if (parms.businessType == 'YW17') {
        data.tabId = '17'
        data.processVisible = true
      } else if (parms.businessType == 'YW18') {
        data.tabId = '18'
        data.processVisible = true
      } else if (parms.businessType == 'YW19') {
        data.tabId = '19'
        data.processVisible = true
      } else if (parms.businessType == 'YW08') {
        data.tabId = '8'
        data.processVisible = true
      } else if (parms.businessType == 'YW07') {
        data.tabId = '9'
        data.processVisible = true
      } else {
        tips('当前审批流暂未接入', 'warning')
      }
      console.log(data.tabId, 'data.tabId ')
    }
    const closeProcessVisable = () => {
      data.tabId = '-1'
      data.processVisible = false
      if (data.currentHandle != 3) {
        ruleFormRef.value.resetFields()
      }
    }
    const refuse = async () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          Modals('确认驳回本次流程申请吗？', '提示', 'warning')
            .then(async () => {
              refuseProcess({
                ...data.params,
                comment: ruleForm.comment,
              }).then((res) => {
                if (res.data.code == 200) {
                  data.processVisible = false
                  childRef.value.getTableList()
                  ruleFormRef.value.resetFields()
                } else {
                  tips(res.data.message, 'warning')
                }
              })
            })
            .catch(() => {
              console.log('点击了取消')
            })
        }
      })
    }
    const pass = async () => {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          Modals('是否提交本次内容', '提示', 'warning')
            .then(async () => {
              allowProcess({
                ...data.params,
                comment: ruleForm.comment,
              }).then((res) => {
                if (res.data.code == 200) {
                  data.processVisible = false
                  childRef.value.getTableList()
                  ruleFormRef.value.resetFields()
                } else {
                  tips(res.data.message, 'warning')
                }
              })
            })
            .catch(() => {
              console.log('点击了取消')
            })
        }
      })
    }

    const openMore = (title) => {
      data.infoType = title
      data.infoPage.current =1
      if (data.infoType == '预警消息') {
        data.infoList = data.earlyWarningList
        initWarningList()
      } else {
        switchTab(data.activeName)
        data.infoList = data.typeContent
      }
      data.isMore = true
    }
    const closeMore = () => {
      data.isMore = false
    }
    const showInfoDetail = (val, type) => {
      console.log(val, type, 'showInfoDetail')
      if (type == 'notice') {
        showDetail(val)
      } else {
        showDetail2(val)
      }
    }
    const handleInfoCurrent = (index) => {
      console.log(index,'handleInfoCurrent');
      data.infoPage.current = index
      if (data.infoType == '预警消息') {
        initWarningList()
        data.infoList = data.earlyWarningList
      } else {
        switchTab(data.activeName)
        data.infoList = data.typeContent
      }
    }
    const showDetail = (val) => {
      console.log('val', val)
      data.detailDialog = true
      data.detailTitle = val
    }
    const showDetail2 = (val) => {
      console.log('val', val)
      data.detailDialog2 = true
      data.detailTitle2 = val
    }

    const chartRef = ref()
    let arrName, arrValue, sumValue, objData, optionData
    const initChartData = () => {
      getWarningCount().then((res) => {
        if (res.data.code == 200) {
          data.chartsData = []
          data.echartsHead = 0
          let list = [] as any
          res.data.data.forEach((e) => {
            list.push({ name: e.businessSource, value: e.num })
            data.echartsHead += e.num
          })
          data.chartsData = list
          console.log('data.chartsData', data.chartsData)
          console.log('获取图表数据data')
          arrName = getArrayValue(data.chartsData, 'name')
          arrValue = getArrayValue(data.chartsData, 'value')
          sumValue = eval(arrValue.join('+'))
          objData = array2obj(data.chartsData, 'name')
          optionData = getData(data.chartsData)
          console.log(optionData, 'optionData')

          console.log('定义图表option')
          initOption()
          console.log('获取图表dom并加载配置图表')
          // var chartDom = document.getElementById('chartDom')
          data.myChart = echarts.init(chartRef.value)
          option && data.myChart.setOption(option)
        }
      })
    }
    function getArrayValue(array, keys) {
      let key = keys || 'value'
      var res = []
      if (array) {
        array.forEach(function (t) {
          res.push(t[key] as never)
        })
      }
      return res
    }
    function array2obj(array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    }
    function getData(data) {
      var res = {
        series: [],
        yAxis: [],
      }
      for (let i = 0; i < data.length; i++) {
        res?.series.push({
          name: '',
          type: 'pie',
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
          center: ['30%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
            },
            {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        } as never)
        res?.series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 1,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
          center: ['30%', '55%'],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 5,
          },
          data: [
            {
              value: 7.5,
              itemStyle: {
                color: 'rgb(3, 31, 62)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
            {
              value: 2.5,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        } as never)
        res.yAxis.push((((data[i].value / sumValue) * 100).toFixed(2) + '%') as never)
      }
      return res
    }
    const fontSizeRem = (res) => {
      data.clientHeight =
        window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      if (!data.clientHeight) return
      let fontSize = 100 * (data.clientHeight / 1080)
      return (res * fontSize) as any
    }
    let option
    let initOption = () => {
      console.log('initOption')
      option = {
        title: {
          text: `预警总数
   ${data.echartsHead} 件`,
          top: '50%',
          left: '23%',
          textStyle: {
            color: '#fff',
            fontSize: fontSizeRem(0.24),
          },
        },
        legend: {
          show: true,
          // icon: 'circle',
          // top: 'center',
          top: '25%',
          bottom: '53%',
          left: '65%',
          data: arrName,
          itemWidth: fontSizeRem(0.3),
          itemHeight: fontSizeRem(0.3),
          width: fontSizeRem(0.2),
          // padding: [0, fontSizeRem(0.2)],
          itemGap: fontSizeRem(-.1),
          // formatter: function (name) {
          //   return '{title|' + name + '} {value|' + objData[name].value + '}  {title|件} {rate|'+objData[name].value*100 +'%}'
          // },
          formatter: function (name) {
            let total = data.chartsData.reduce((a, b) => {
              return a + b.value
            }, 0)
            let res = data.chartsData.filter((v) => v.name === name)
            let percent = ((res[0].value * 100) / total).toFixed(0)
            return (
              '\n \n{name| ' + name +'}     {zhanbi|占比}  \n \n   {value|' + 
              objData[name].value +'}                 {percent|' + percent + '%}'
            )
          },
          textStyle: {
            rich: {
              name: {
                fontSize: fontSizeRem(0.2),
                lineHeight: fontSizeRem(0.1),
                color: '#fff',
              },
              zhanbi:{
                fontSize: fontSizeRem(0.2),
                lineHeight: fontSizeRem(0.1),
                color: '#fff',
              },
              value: {
                fontSize: fontSizeRem(0.2),
                lineHeight: fontSizeRem(0.15),
                color: '#4E6EBE',
              },
              percent: {
                fontSize: fontSizeRem(0.2),
                lineHeight: fontSizeRem(0.15),
                color: '#4E6EBE',
              },
            },
          },
        },
        // grid: {
        //   show: true, //是否显示图表背景网格
        //   left: '20%', //图表距离容器左侧多少距离
        //   right: '10%', //图表距离容器右侧侧多少距离
        //   bottom: '3%', //图表距离容器上面多少距离
        //   top: 50, //图表距离容器下面多少距离
        //   containLabel: true, //防止标签溢出
        //   backgroundColor: '#555555', //网格背景色，默认透明
        // },
        tooltip: {
          show: true,
          trigger: 'item',
          textStyle: {
            fontSize: fontSizeRem(0.15),
          },
          formatter: '{a}{b}:{c}件<br>({d}%)',
        },
        color: ['rgb(9,187,247)', 'rgb(184,254,165)', 'rgb(253,218,23)', 'rgb(252,152,12)'],
        xAxis: [
          {
            show: false,
          },
        ],
        // series: optionData?.series,
        series: [
          {
            name: '预警总数',
            type: 'pie',
            radius: [fontSizeRem(0.6), fontSizeRem(1.5)],
            center: ['30%', '55%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            data: data.chartsData,
          },
        ],
      }
    }
    const initChart = () => {
      initOption()
      option && data.myChart.setOption(option)
      data.myChart.resize()
    }
    onMounted(() => {
      initChartData()
      // initOption()
      // var chartDom = document.getElementById('chartDom')
      // data.myChart = echarts.init(chartDom)
      // option && data.myChart.setOption(option)
      setTimeout(() => {
        window.addEventListener('resize', initChart)
      }, 100)
    })
    onBeforeUnmount(() => {
      // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
      window.removeEventListener('resize', initChart)
    })
    return {
      data,
      chartRef,
      childRef,
      ruleFormRef,
      ruleForm,
      rulesComment,
      switchTab,
      changeStatus,
      changeProcess,
      changeBoard,
      closeMore,
      refuse,
      pass,
      closeProcessVisable,
      showDetail,
      showDetail2,
      handleInfoCurrent,
      openMore,
      showInfoDetail,
    }
  },
})
</script>

<style lang="scss" scoped>
:deep(.demo-tabs > .el-tabs__content) {
  max-height: 550px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media screen and (max-width: 800px) {
  .comment {
    width: 4530px;
  }
}

.homePage {
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: calc(100vh - 60px);
  padding: 2vh;
  font-size: 2vh;
  // font-family: '思源黑体';
  background-image: url(./img/bg.jpg);
  font-family: '思源黑体', 'Microsoft YaHei';
  background-color: #0b1545;
  background-size: 100% 100%;

  .event {
    width: 35vw;
    height: 42vh;
    background-image: url(./img/box01.png);
    background-size: 100% 100%;

    .title {
      line-height: 5vh;
      text-align: center;
    }

    .event-list {
      height: 40vh;
      padding: 4vh;
      padding-top: 3vh;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .event-box {
        display: flex;
        cursor: pointer;
        justify-content: space-around;
        width: 48%;
        height: 40%;
        padding: 3vh;
        background-size: 100% 100%;

        .info {
          padding: 1.5vh 0;
          // margin: 0 1vh;
          font-size: 1.6vh;

          .number {
            color: #4e6ebe;
            margin-top: 1vh;

            span {
              display: inline-block;
              font-size: 2vh;
            }
          }
        }
      }

      .bg1 {
        background-image: url(./img/todo.png);
      }

      .bg2 {
        background-image: url(./img/history.png);
      }

      .bg3 {
        background-image: url(./img/toRead.png);
      }

      .bg4 {
        background-image: url(./img/hasRead.png);
      }

      img {
        width: 8vh;
        height: 8vh;
      }
    }
  }

  .notice {
    width: 60vw;
    height: 42vh;
    padding: 5vh 4vh;
    background-image: url(./img/box-long.png);
    background-size: 100% 100%;
    .notice-tab {
      display: flex;
      font-size: 1.6vh;
      .more {
        color: #a8afc4;
        cursor: pointer;
        margin-left: -3vh;
        margin-right: 3vh;
      }
    }
    .tab-header {
      width: 13vh;
      height: 3vh;
      font-size: 1.6vh;
      // line-height: 3vh;
      border: none;
      padding: 0;
      cursor: pointer;
      color: #4861a6;
      margin-right: 5vh;
      border: 1px solid #192e6e;
      background-color: #070f39;
    }

    .content {
      color: #c8cbdb;
      overflow-y: auto;
      height: 30vh;
      font-size: 1.8vh;
      padding: 0 3vh;
      padding-right: 1vh;
      list-style-type: square;

      li {
        position: relative;
        display: flex;
        justify-content: space-between;
        line-height: 3.8vh;
        cursor: pointer;

        p {
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        &::before {
          content: '';
          position: absolute;
          width: .5vh;
          height: .5vh;
          border: 0.1vh solid #a8afc4;
          background-color: #a8afc4;
          border-radius: 50%;
          // border-bottom-color: transparent;
          // border-right-color: transparent;
          transform: translate(-50%, -50%) rotate(135deg);
          left: -1vh;
          top: 2vh;
        }
      }

      &::-webkit-scrollbar {
        width: 1px;
      }

      &::-webkit-scrollbar-track {
        background: #0036ab;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #0873dd;
      }
    }

    .active {
      color: #fff;
      background-color: #192e6e;
    }

    :deep(.el-dialog__header) {
      text-align: center;
      background: #04396e;
    }

    :deep(.el-dialog__title) {
      color: #fff;
      font-size: 2vh;
    }

    :deep(.el-dialog__body) {
      min-height: 300px;
      // overflow-y: scroll;
      font-size: 1.6vh;
      background: #04396e;
      color: #fff !important;
      line-height: 3vh;
      text-indent: 2em;
    }
  }

  .wraning {
    width: 35vw;
    height: 42vh;
    // padding: 5vh 4vh;
    background-image: url(./img/box-short.png);
    background-size: 100% 100%;

    p {
      position: absolute;
      font-size: 1.8vh;
    }

    #chartDom {
      height: 100%;
      // padding-left: 10vh;
    }
  }

  .wranings {
    width: 60vw;
    height: 42vh;
    padding: 5vh 4vh;
    background-image: url(./img/box-long.png);
    background-size: 100% 100%;
    li {
      // cursor: auto !important;
    }
  }

  p {
    margin: 0;
  }
}
.titel-table {
  height: 90vh;
  width: 96vw;
  position: absolute;
  z-index: 99;
  overflow: auto;
}
.infoContent {
  max-height: 450px;
  overflow-y: scroll;
  font-size: 2vh;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
.el-pagination {
  text-align: center;
}
.global-dialog {
  z-index: 100;
}
</style>
